<template>
    <div>
        <fieldset v-for="(row, ix) in rows" :key="ix" class="multi_rows_fieldset">
            <legend class="multi_rows_legend">{{ labels[ix] }}</legend>
            <el-icon class="multi_rows_icon" v-if="!disabled && ix > 0 && ix == curIx - 1" @click="closeRow(ix)"><CloseBold/></el-icon>
            <div>
                <my-form-row :tb="tb" :formData="formData" :computeData="computeData" :row="row" />
            </div>
        </fieldset>
        <el-button v-if="!disabled && curIx < count" @click="curIx = curIx + 1" type="primary">+添加</el-button
        >
    </div>
</template>

<script>
export default {
    props: {
        modelValue: String,
        fields: String,
        tb: Object,
        formData: Object,
        disabled: Boolean,
        computeData: Object,
        count: {
            type: Number,
            default: 1,
        },
        label: String,
        tag: {
            type: String,
            default: "{ix}",
        },
    },
    data() {
        return {
            curIx: 1,
        };
    },
    created() {
        this.curIx = this.getCurIx();
    },
    computed: {
        rows() {
            let items = [];
            let flds = this.fields || "";
            for (let i = 1; i <= this.curIx; i++) {
                items.push(flds.replaceAll(this.tag, i));
            }
            return items;
        },
        labels() {
            let items = [];
            let lbl = this.label || this.tag;
            for (let i = 1; i <= this.count; i++) {
                let lb = lbl.replaceAll(this.tag, i);
                if (lb == this.label) {
                    lb = this.label + String(i);
                }
                items.push(lb);
            }
            return items;
        },
    },
    watch: {
        formData: function () {
            this.curIx = this.getCurIx();
        },
    },
    methods: {
        getCurIx() {
            let ix = this.count;
            while (ix > 1) {
                let flds = this.getFielsCode(ix);
                for (const key in flds) {
                    const fld = flds[key];
                    if (this.formData[fld]) {
                        return ix;
                    }
                }
                ix--;
            }
            return 1;
        },
        getFielsCode(ix) {
            return this.fields
                .replaceAll(this.tag, ix)
                .split(",")
                .map((x) => {
                    let fld = x;
                    let ix = fld.indexOf(":");
                    if (ix > 0) {
                        fld = fld.substring(0, ix);
                    }
                    return fld;
                });
        },
        closeRow() {
            if (this.curIx > 1) {
                let flds = this.getFielsCode(this.curIx);
                flds.forEach((fld) => {
                    this.formData[fld] = null;
                });
                this.curIx = this.curIx - 1;
            }
        },
    },
};
</script>

<style scoped>
.multi_rows_icon {
    border: 1px solid #ccc;
    background-color: white;
    font-size: 20px;
    cursor: pointer;
    float: right;
    margin-top: -30px;
}
.multi_rows_legend {
    width: auto;
    border: none;
    margin: 0px;
    font-size: 1.1em;
    font-weight: 500;
    color: #695fee;
}
.multi_rows_fieldset {
    padding: 8px;
    border: 1px solid #cecece;
}
</style>